<template>
	<view>
		<uni-popup ref="popup" class="m-popup" type="bottom" background-color="transparent">
			<view class="popup-box">
				<view class="top">
					<view class="cancel" @tap="close()">
						取消
					</view>
					<view class="title">
						星期时间设置
					</view>
					<view class="determine" @tap="submit()">
						确定
					</view>
				</view>
				<view class="popup-item">
					<view class="popup-item-title">
						工作日时间
					</view>
					<view class="popup-item-week">
						<view class="popup-item-week-item" v-for="(item,index) in weekDay" :key="index"
							@tap="changeWeek(1,item)">
							<view
								:class="['popup-item-week-item-inner',item.active?'week-item-act-def':'',item.value==curWeek1?'week-item-act':'']">
								{{item.label}}
							</view>
						</view>
					</view>
					<view class="work-day-item">
						<text class="work-day-label">工作时间：</text>
						<uni-easyinput trim class="uni-easyinput2" :inputBorder="false" type="number"
							v-model="formData.date1[curWeek1].time1" :clearable="false" placeholder="请输入时间" />
						<view class="unit">
							<text>小时</text>
							<image v-if="formData.date1[curWeek1].time1" class="close-img" @tap="clearTime(0)"
								:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
						</view>
					</view>
					<view class="work-day-item2">
						<text class="work-day-label">白班时间：</text>
						<uni-easyinput @tap="showTimePicker('1')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time2" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit2">—</view>
						<uni-easyinput @tap="showTimePicker('1')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time3" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit">
							<text>时间段</text>
							<image v-if="formData.date1[curWeek1].time3" class="close-img" @tap="clearTime(1)"
								:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
						</view>
					</view>
					<view class="work-day-item2">
						<text class="work-day-label">加班时间：</text>
						<uni-easyinput @tap="showTimePicker('2')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time4" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit2">—</view>
						<uni-easyinput @tap="showTimePicker('2')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time5" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit">
							<text>时间段</text>
							<image v-if="formData.date1[curWeek1].time5" class="close-img" @tap="clearTime(2)"
								:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
						</view>
					</view>
					<view class="work-day-item2">
						<text class="work-day-label">夜班时间：</text>
						<uni-easyinput @tap="showTimePicker('3')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time6" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit2">—</view>
						<uni-easyinput @tap="showTimePicker('3')" trim class="uni-easyinput2" :inputBorder="false"
							type="number" v-model="formData.date1[curWeek1].time7" :clearable="false"
							placeholder="请选择时间" />
						<view class="unit">
							<text>时间段</text>
							<image v-if="formData.date1[curWeek1].time7" class="close-img" @tap="clearTime(3)"
								:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
						</view>
					</view>
					<template v-if="curTab==1">
						<view class="popup-item-title">
							周末日时间
						</view>
						<view class="popup-item-week">
							<view class="popup-item-week-item" v-for="(item,index) in weekDay2" :key="index"
								@tap="changeWeek(2,item)">
								<view
									:class="['popup-item-week-item-inner',item.active?'week-item-act-def':'',item.value==curWeek2?'week-item-act':'']">
									{{item.label}}
								</view>
							</view>
						</view>
						<view class="work-day-item2">
							<text class="work-day-label">白班时间：</text>
							<uni-easyinput @tap="showTimePicker('4')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date2[curWeek2].time1" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit2">—</view>
							<uni-easyinput @tap="showTimePicker('4')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date2[curWeek2].time2" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit">
								<text>时间段</text>
								<image v-if="formData.date2[curWeek2].time2" class="close-img" @tap="clearTime(4)"
									:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
							</view>
						</view>
						<view class="work-day-item2">
							<text class="work-day-label">夜班时间：</text>
							<uni-easyinput @tap="showTimePicker('5')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date2[curWeek2].time3" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit2">—</view>
							<uni-easyinput @tap="showTimePicker('5')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date2[curWeek2].time4" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit">
								<text>时间段</text>
								<image v-if="formData.date2[curWeek2].time4" class="close-img" @tap="clearTime(5)"
									:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
							</view>
						</view>
					</template>
					<template v-if="curTab==1">
						<view class="popup-item-title">
							节假日时间
						</view>
						<view class="popup-item-week">
							<view class="popup-item-week-item" v-for="(item,index) in weekDay3" :key="index"
								@tap="changeWeek(3,item)">
								<view
									:class="['popup-item-week-item-inner',item.active?'week-item-act-def':'',item.value==curWeek3?'week-item-act':'']">
									{{item.label}}
								</view>
							</view>
						</view>
						<view class="work-day-item2">
							<text class="work-day-label">白班时间：</text>
							<uni-easyinput @tap="showTimePicker('6')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date3[curWeek3].time1" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit2">—</view>
							<uni-easyinput @tap="showTimePicker('6')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date3[curWeek3].time2" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit">
								<text>时间段</text>
								<image v-if="formData.date3[curWeek3].time2" class="close-img" @tap="clearTime(6)"
									:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
							</view>
						</view>
						<view class="work-day-item2">
							<text class="work-day-label">夜班时间：</text>
							<uni-easyinput @tap="showTimePicker('7')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date3[curWeek3].time3" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit2">—</view>
							<uni-easyinput @tap="showTimePicker('7')" trim class="uni-easyinput2" :inputBorder="false"
								type="number" v-model="formData.date3[curWeek3].time4" :clearable="false"
								placeholder="请选择时间" />
							<view class="unit">
								<text>时间段</text>
								<image v-if="formData.date3[curWeek3].time4" class="close-img" @tap="clearTime(7)"
									:src="$mConfig.imageUrl + '/images/guanbi.png'" mode=""></image>
							</view>
						</view>
					</template>
				</view>

			</view>
		</uni-popup>
		<TpfTimeRange ref="time" :startTime="startTime" :startDefaultTime="startDefaultTime" :endTime="endTime"
			:endDefaultTime="endDefaultTime" @timeRange="timeRange">
		</TpfTimeRange>
	</view>
</template>

<script>
	import TpfTimeRange from "../tpf-time-range/tpf-time-range.vue"
	const weekDays = [{
			value: '0',
			label: '日',
			active: false
		},
		{
			value: '1',
			label: '一',
			active: false
		},
		{
			value: '2',
			label: '二',
			active: false
		},
		{
			value: '3',
			label: '三',
			active: false
		},
		{
			value: '4',
			label: '四',
			active: false
		},
		{
			value: '5',
			label: '五',
			active: false
		},
		{
			value: '6',
			label: '六',
			active: false
		},
	]
	export default {
		components: {
			TpfTimeRange
		},
		data() {
			return {
				weekDay: [],
				weekDay2: [],
				weekDay3: [],
				curWeek1: 1,
				curWeek2: 0,
				curWeek3: 0,
				formData: {
					// 工作日
					date1: [{
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}, {
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						},
						{
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}, {
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}, {
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}, {
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}, {
							time1: '',
							time2: '',
							time3: '',
							time4: '',
							time5: '',
							time6: '',
							time7: '',
						}
					],
					// 周末
					date2: [{
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}],
					// 工作日
					date3: [{
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}, {
						time1: '',
						time2: '',
						time3: '',
						time4: '',
					}]
				},
				curTab: '',
				startTime: "00:00",
				startDefaultTime: "06:00",
				endTime: "24:00",
				endDefaultTime: "06:00",
			}
		},
		mounted() {
			this.weekDay = weekDays.map(ele => {
				return {
					...ele,
					active: ele.value >= 1 && ele.value <= 5
				}
			});
			this.weekDay2 = weekDays.map(ele => {
				return {
					...ele,
					active: ele.value == 0 || ele.value == 6
				}
			});
			// 当前周是否是法定节假日
			this.weekDay3 = weekDays;
		},
		methods: {
			changeWeek(type, item) {
				if (type == 1) {
					this.curWeek1 = item.value;
				} else if (type == 2) {
					this.curWeek2 = item.value;
				} else if (type == 3) {
					this.curWeek3 = item.value;
				}
			},
			open(type) {
				// 初始化
				this.curTab = type;
				this.curWeek1 = 1
				this.curWeek2 = 0
				this.curWeek3 = 0
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			showTimePicker(type) {
				let flag = true
				// 工作日、 周末、 节假日，三个类型，同一天只能填写其中一个类型
				// 工作日白班
				if (type == 1) {
					if (this.formData.date2[this.curWeek2].time1) {
						flag = false
					}
					if (this.formData.date3[this.curWeek3].time1) {
						flag = false
					}
					// 工作日夜班
				} else if (type == 3) {
					if (this.formData.date2[this.curWeek2].time3) {
						flag = false
					}
					if (this.formData.date3[this.curWeek3].time3) {
						flag = false
					}
					// 周末白班
				} else if (type == 4) {
					if (this.formData.date2[this.curWeek2].time1) {
						flag = false
					}
					if (this.formData.date3[this.curWeek3].time1) {
						flag = false
					}
					// 周末夜班
				} else if (type == 5) {
					if (this.formData.date1[this.curWeek1].time6) {
						flag = false
					}
					if (this.formData.date3[this.curWeek3].time3) {
						flag = false
					}
					// 节假日白班
				} else if (type == 6) {
					if (this.formData.date1[this.curWeek1].time2) {
						flag = false
					}
					if (this.formData.date2[this.curWeek2].time1) {
						flag = false
					}
					// 节假日夜班
				} else if (type == 7) {
					if (this.formData.date1[this.curWeek1].time7) {
						flag = false
					}
					if (this.formData.date2[this.curWeek2].time3) {
						flag = false
					}
				}

				flag && this.$refs['time'].open(type);
			},
			submit() {

			},
			timeRange(e, type) {
				console.log(e, type);
				if (type == 1) {
					this.formData.date1[this.curWeek1].time2 = e[0]
					this.formData.date1[this.curWeek1].time3 = e[1]
				} else if (type == 2) {
					this.formData.date1[this.curWeek1].time4 = e[0]
					this.formData.date1[this.curWeek1].time5 = e[1]
				} else if (type == 3) {
					this.formData.date1[this.curWeek1].time6 = e[0]
					this.formData.date1[this.curWeek1].time7 = e[1]
				} else if (type == 4) {
					this.formData.date2[this.curWeek2].time1 = e[0]
					this.formData.date2[this.curWeek2].time2 = e[1]
				} else if (type == 5) {
					this.formData.date2[this.curWeek2].time3 = e[0]
					this.formData.date2[this.curWeek2].time4 = e[1]
				} else if (type == 6) {
					this.formData.date3[this.curWeek3].time1 = e[0]
					this.formData.date3[this.curWeek3].time2 = e[1]
				} else if (type == 7) {
					this.formData.date3[this.curWeek3].time3 = e[0]
					this.formData.date3[this.curWeek3].time4 = e[1]
				}
			},
			clearTime(type) {
				if (type == 0) {
					this.formData.date1[this.curWeek1].time1 = ''
				} else if (type == 1) {
					this.formData.date1[this.curWeek1].time2 = ''
					this.formData.date1[this.curWeek1].time3 = ''
				} else if (type == 2) {
					this.formData.date1[this.curWeek1].time4 = ''
					this.formData.date1[this.curWeek1].time5 = ''
				} else if (type == 3) {
					this.formData.date1[this.curWeek1].time6 = ''
					this.formData.date1[this.curWeek1].time7 = ''
				} else if (type == 4) {
					this.formData.date2[this.curWeek2].time1 = ''
					this.formData.date2[this.curWeek2].time2 = ''
				} else if (type == 5) {
					this.formData.date2[this.curWeek2].time3 = ''
					this.formData.date2[this.curWeek2].time4 = ''
				} else if (type == 6) {
					this.formData.date3[this.curWeek3].time1 = ''
					this.formData.date3[this.curWeek3].time2 = ''
				} else if (type == 7) {
					this.formData.date3[this.curWeek3].time3 = ''
					this.formData.date3[this.curWeek3].time4 = ''
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-popup {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}


	.popup-box {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			padding: 48rpx 50rpx 41rpx 50rpx;
			border-bottom: 8rpx solid #F2F2F2;

			.cancel {
				font-weight: 500;
				font-size: 36rpx;
				color: #999999;
			}

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}

			.determine {
				font-weight: 500;
				font-size: 36rpx;
				color: #3A92FF;
			}
		}

		.popup-item {
			height: 80vh;
			overflow-y: auto;

			.popup-item-title {
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				margin: 28rpx 0 32rpx 50rpx;
			}

			.popup-item-week {
				height: 80rpx;
				background: #F0F0F0;
				border-radius: 6rpx;
				display: flex;
				margin: 0 10rpx 38rpx 10rpx;

				.popup-item-week-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;

					.popup-item-week-item-inner {
						width: 54rpx;
						height: 54rpx;
						background: transparent;
						border-radius: 10rpx;
						line-height: 54rpx;
						text-align: center;
					}

					.week-item-act-def {
						background: #dcdcdc;
					}

					.week-item-act {
						background: #3A92FF;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}


			}

			.work-day-item {
				display: flex;
				align-items: center;
				margin: 0 0 24rpx 64rpx;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
				}

				.uni-easyinput2 {
					flex: 1;
					background: #F5F5F5;
					border-radius: 8rpx;
				}

				.unit {
					width: 140rpx;
					text-align: left;
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #222;
					display: flex;
					align-items: center;
					justify-content: center;

					.close-img {
						width: 25rpx;
						height: 26rpx;
						margin-left: auto;
						margin-right: 26rpx;
					}
				}

			}

			.work-day-item2 {
				display: flex;
				align-items: center;
				margin: 0 0 24rpx 64rpx;

				.work-day-label {
					font-weight: 500;
					font-size: 30rpx;
					color: #3B4552;
				}

				.uni-easyinput2 {
					flex: 1;
					background: #F5F5F5;
					border-radius: 8rpx;
				}

				.unit {
					width: 140rpx;
					text-align: left;
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #222;
					display: flex;
					align-items: center;
					justify-content: center;

					.close-img {
						width: 25rpx;
						height: 26rpx;
						margin-left: auto;
						margin-right: 26rpx;
					}
				}

				.unit2 {
					font-weight: 500;
					font-size: 30rpx;
					color: #222;
					margin: 0 4rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
				}

			}
		}
	}
</style>